<template>
	<el-table
		:data="tableNewDates"
		style="width: 100%; margin-bottom: 20px"
		row-key="numIdx"
		border
		default-expand-all
		:summary-method="getSummaries"
		show-summary
	>
		<el-table-column prop="numIdx" label="序号" width="100" />
		<el-table-column prop="name" label="费用名称" />
		<el-table-column prop="amount" label="费用金额(万元)" />
		<el-table-column prop="remark" label="备注" />
	</el-table>
</template>

<script lang="ts" setup>
import { toRefs, defineProps, h, computed, watch } from 'vue';
import { cloneDeep } from 'lodash';

const props = defineProps({
	tableData: Object,
});
const getSummaries = () => {
	let total = tableData?.value?.total;
	const sums: any = ['--', total, '--'];
	let a = h('div', { style: { textAlign: 'center' } }, ['合计']);
	sums.splice(0, 0, a);
	return sums;
};

function deconstructInPlace(data: any) {
	for (let i = 0; i < data.length; i++) {
		let item = data[i];
		data[i] = { ...item.data, children: item.children };
		if (item.children) {
			deconstructInPlace(item.children);
		}
	}
}
//新增数据
const tableNewDates: any = ref([]);
watch(
	() => props.tableData,
	(newVal: any) => {
		if (newVal?.budget) {
			const data = cloneDeep(newVal.budget);
			deconstructInPlace(data);
			tableNewDates.value = data || [];
		}
	},
	{
		immediate: true,
		deep: true,
	}
);
const tableNewDate = computed(() => {
	const data = cloneDeep(tableData.budget);
	deconstructInPlace(data);
	return data;
});

const { tableData } = toRefs(props);
</script>

<style lang="scss" scoped></style>
